<template>
  <div class="properties-panel">
    <div class="panel-header">
      <h3>属性配置</h3>
      <el-button
        v-if="selectedComponent"
        size="small"
        type="danger"
        @click="deleteComponent"
      >
        删除组件
      </el-button>
    </div>

    <!-- 未选中组件时的提示 -->
    <div v-if="!selectedComponent" class="no-selection">
      <el-icon class="no-selection-icon"><InfoFilled /></el-icon>
      <p>请选择画布中的组件进行编辑</p>
    </div>

    <!-- 组件属性编辑 -->
    <div v-else class="panel-content">
      <!-- 基本信息 -->
      <div class="property-section">
        <div class="section-title">基本信息</div>
        <div class="property-item">
          <label>组件类型</label>
          <span class="component-type">{{ componentConfig?.name || selectedComponent.type }}</span>
        </div>
        <div class="property-item">
          <label>组件ID</label>
          <span class="component-id">{{ selectedComponent.id }}</span>
        </div>
      </div>

      <!-- 位置和尺寸 -->
      <div class="property-section">
        <div class="section-title">位置和尺寸</div>
        <div class="property-row">
          <div class="property-item half">
            <label>X 坐标</label>
            <el-input-number
              v-model="selectedComponent.position.x"
              :min="0"
              size="small"
              @change="updatePosition"
            />
          </div>
          <div class="property-item half">
            <label>Y 坐标</label>
            <el-input-number
              v-model="selectedComponent.position.y"
              :min="0"
              size="small"
              @change="updatePosition"
            />
          </div>
        </div>
      </div>

      <!-- 组件属性 -->
      <div v-if="componentConfig?.propConfig?.length" class="property-section">
        <div class="section-title">组件属性</div>
        <div
          v-for="prop in componentConfig.propConfig"
          :key="prop.prop"
          class="property-item"
        >
          <label>{{ prop.label }}</label>

          <!-- 文本输入 -->
          <el-input
            v-if="prop.type === 'input'"
            v-model="selectedComponent.props[prop.prop]"
            size="small"
            @input="updateProps"
          />

          <!-- 多行文本 -->
          <el-input
            v-else-if="prop.type === 'textarea'"
            v-model="selectedComponent.props[prop.prop]"
            type="textarea"
            :rows="2"
            size="small"
            @input="updateProps"
          />

          <!-- 数字输入 -->
          <el-input-number
            v-else-if="prop.type === 'number'"
            v-model="selectedComponent.props[prop.prop]"
            size="small"
            @change="updateProps"
          />

          <!-- 选择器 -->
          <el-select
            v-else-if="prop.type === 'select'"
            v-model="selectedComponent.props[prop.prop]"
            size="small"
            @change="updateProps"
          >
            <el-option
              v-for="option in prop.options"
              :key="option"
              :label="option"
              :value="option"
            />
          </el-select>

          <!-- 开关 -->
          <el-switch
            v-else-if="prop.type === 'switch'"
            v-model="selectedComponent.props[prop.prop]"
            @change="updateProps"
          />

          <!-- 颜色选择器 -->
          <el-color-picker
            v-else-if="prop.type === 'color'"
            v-model="selectedComponent.props[prop.prop]"
            size="small"
            @change="updateProps"
          />
        </div>
      </div>

      <!-- 样式设置 -->
      <div v-if="componentConfig?.styleConfig?.length" class="property-section">
        <div class="section-title">样式设置</div>
        <div
          v-for="style in componentConfig.styleConfig"
          :key="style.prop"
          class="property-item"
        >
          <label>{{ style.label }}</label>

          <!-- 文本输入 -->
          <el-input
            v-if="style.type === 'input'"
            v-model="selectedComponent.styles[style.prop]"
            size="small"
            @input="updateStyles"
          />

          <!-- 选择器 -->
          <el-select
            v-else-if="style.type === 'select'"
            v-model="selectedComponent.styles[style.prop]"
            size="small"
            @change="updateStyles"
          >
            <el-option
              v-for="option in style.options"
              :key="option"
              :label="option"
              :value="option"
            />
          </el-select>

          <!-- 颜色选择器 -->
          <el-color-picker
            v-else-if="style.type === 'color'"
            v-model="selectedComponent.styles[style.prop]"
            size="small"
            @change="updateStyles"
          />
        </div>
      </div>

      <!-- 高级设置 -->
      <div class="property-section">
        <div class="section-title">高级设置</div>
        <div class="property-item">
          <label>自定义CSS类</label>
          <el-input
            v-model="customClass"
            placeholder="输入CSS类名，多个类名用空格分隔"
            size="small"
            @input="updateCustomClass"
          />
          <div class="property-hint">
            可用的预设类：highlight, shadow-box, rounded-corners, text-gradient, pulse-animation, glow-effect
          </div>
        </div>
        <div class="property-item">
          <label>自定义样式</label>
          <el-input
            v-model="customStyle"
            type="textarea"
            placeholder="输入CSS样式，如：color: red; font-size: 16px; background: #f0f0f0;"
            :rows="4"
            size="small"
            @input="updateCustomStyle"
          />
          <div class="property-hint">
            支持所有CSS属性，多个属性用分号分隔
          </div>
        </div>
        <div class="property-item">
          <label>z-index 层级</label>
          <el-input-number
            v-model="selectedComponent.styles.zIndex"
            :min="-999"
            :max="9999"
            size="small"
            @change="updateStyles"
          />
          <div class="property-hint">
            数字越大，组件显示越靠前
          </div>
        </div>
      </div>

      <!-- 图表数据编辑（仅图表组件） -->
      <div
        v-if="isChartComponent"
        class="property-section"
      >
        <div class="section-title">图表数据</div>
        <div class="property-item">
          <label>数据配置</label>
          <el-input
            v-model="chartDataString"
            type="textarea"
            placeholder="输入JSON格式的图表数据"
            :rows="8"
            size="small"
            @blur="updateChartData"
          />
        </div>
        <div class="data-tip">
          <el-icon><InfoFilled /></el-icon>
          <span>请输入有效的JSON格式数据</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useEditorStore } from '@/stores/editor'
import { getComponentConfig } from '@/config/componentLibrary'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const editorStore = useEditorStore()

// 自定义样式和类
const customClass = ref('')
const customStyle = ref('')
const chartDataString = ref('')

// 计算属性
const selectedComponent = computed(() => editorStore.selectedComponent)

const componentConfig = computed(() => {
  if (!selectedComponent.value) return null
  return getComponentConfig(selectedComponent.value.type)
})

const isChartComponent = computed(() => {
  return selectedComponent.value && selectedComponent.value.type.includes('chart')
})

// 监听选中组件变化
watch(selectedComponent, (newComponent) => {
  if (newComponent) {
    // 更新自定义类和样式
    customClass.value = newComponent.styles.className || ''
    customStyle.value = newComponent.styles.customStyle || ''

    // 如果是图表组件，更新图表数据
    if (newComponent.type.includes('chart')) {
      chartDataString.value = JSON.stringify(newComponent.props.data, null, 2)
    }
  }
}, { immediate: true })

// 更新组件位置
const updatePosition = () => {
  if (!selectedComponent.value) return

  editorStore.updateComponentPosition(
    selectedComponent.value.id,
    selectedComponent.value.position
  )
}

// 更新组件属性
const updateProps = () => {
  if (!selectedComponent.value) return

  editorStore.updateComponentProps(
    selectedComponent.value.id,
    selectedComponent.value.props
  )
}

// 更新组件样式
const updateStyles = () => {
  if (!selectedComponent.value) return

  editorStore.updateComponentStyles(
    selectedComponent.value.id,
    selectedComponent.value.styles
  )
}

// 更新自定义CSS类
const updateCustomClass = () => {
  if (!selectedComponent.value) return

  editorStore.updateComponentStyles(selectedComponent.value.id, {
    className: customClass.value
  })
}

// 更新自定义样式
const updateCustomStyle = () => {
  if (!selectedComponent.value) return

  editorStore.updateComponentStyles(selectedComponent.value.id, {
    customStyle: customStyle.value
  })
}

// 更新图表数据
const updateChartData = () => {
  if (!selectedComponent.value || !isChartComponent.value) return

  try {
    const data = JSON.parse(chartDataString.value)
    editorStore.updateComponentProps(selectedComponent.value.id, { data })
    ElMessage.success('图表数据更新成功')
  } catch (error) {
    ElMessage.error('JSON格式错误，请检查数据格式')
    console.error('图表数据解析失败:', error)
  }
}

// 删除组件
const deleteComponent = () => {
  if (selectedComponent.value) {
    editorStore.removeComponent(selectedComponent.value.id)
  }
}
</script>

<style lang="scss" scoped>
.properties-panel {
  width: 300px;
  height: 100%;
  background: #fff;
  border-left: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.no-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #909399;
  text-align: center;

  .no-selection-icon {
    font-size: 48px;
    margin-bottom: 16px;
    color: #c0c4cc;
  }

  p {
    margin: 0;
    font-size: 14px;
  }
}

.property-section {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.property-item {
  margin-bottom: 12px;

  &:last-child {
    margin-bottom: 0;
  }

  label {
    display: block;
    font-size: 12px;
    color: #606266;
    margin-bottom: 6px;
  }

  .component-type,
  .component-id {
    display: block;
    font-size: 12px;
    color: #409eff;
    background: #f0f8ff;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
  }
}

.property-row {
  display: flex;
  gap: 8px;

  .property-item.half {
    flex: 1;
  }
}

.property-hint {
  font-size: 11px;
  color: #909399;
  margin-top: 4px;
  line-height: 1.3;
}

.data-tip {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: #909399;

  .el-icon {
    font-size: 14px;
  }
}

// Element Plus 组件样式覆盖
:deep(.el-input) {
  .el-input__wrapper {
    font-size: 12px;
  }
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-color-picker) {
  width: 100%;
}

:deep(.el-switch) {
  height: 20px;
}
</style>
